<template>
  <view class="historyEditDetail">
    <view class="title_des">题目</view>
      <view class="contentBox">
        {{ examInfo.examName }}
      </view>
      <view class="title_des">题干</view>
      <view class="contentBox">
        {{ examInfo.examText }}
      </view>
      <view class="title_des">重要知识点</view>
      <view class="contentBox">
        {{ examInfo.examNotes }}
      </view>
      <view class="title_des">考评打分</view>
      <!-- examScoreSet  大分项 1     小分项 2  -->
      <!-- 小分项 start -->
      <view class="contentBox contentInner" v-if="examScoreSet === '2'">
        <view class="headBox">
          <view class="headItem headItem1">大类</view>
          <view class="headItem headItem2">判断标准</view>
          <view class="headItem headItem3">满分</view>
          <view class="headItem headItem4">修改前得分</view>
          <view class="headItem headItem5">修改后得分</view>
        </view>
        <view class="contentInnerBox" v-for="(item,index) in scoreCardList" :key='index'>
          <view class="contentItem1">{{ item.item }}</view> 
          <view class="innerDes">
            <view v-for="(q,i) in item.children" :key="i" class="innerDesList" style="display: flex;">
              <view :class="'innerCon ' + ( q.editBeforeSmall !== q.result ? 'innerConDef' : '')">
                {{ q.scoreCardScoringCriteria }}
              </view>
              <view :class='"scoreBox1 " + ( q.editBeforeSmall !== q.result ? "scoreBox1Def" : "")' style="width: 80rpx;display: flex;align-items:center;justify-content: center;border-bottom: 1px solid #00796B50;border-right: 1px solid #00796B50;color: #999;">
                {{ q.scoreCardTotalScore }}
              </view>
              <view :class='"scoreBox2 " + ( q.editBeforeSmall !== q.result ? "scoreBox2Def" : "")' style="width: 80rpx;display: flex;align-items:center;justify-content: center;border-bottom: 1px solid #00796B50;border-right: 1px solid #00796B50;color: #999;">
                {{ q.editBeforeSmall }}
              </view>
              <view :class='"scoreBox3 " + ( q.editBeforeSmall !== q.result ? "scoreBox3Def" : "")' style="width: 80rpx;display: flex;align-items:center;justify-content: center;border-bottom: 1px solid #00796B50;border-right: 1px solid #00796B50;color: #999;">
                {{ q.result }}
              </view>
            </view>
          </view>
        </view>
        <view class="headBox headBoxBot">
          <view class="headItem headItem1">总分</view>
          <view class="headItem headItem2"></view>
          <view class="headItem headItem3"> {{ allScore }}</view>
          <view class="headItem headItem4">{{ allScoreResultBefore }}</view>
          <view class="headItem headItem5">{{ allScoreResult }}</view>
        </view>
      </view>
      <!-- 小分项 end -->
      <!-- 大分项 start -->
      <view class="contentBox contentInner" v-if="examScoreSet === '1'">
        <view class="headBox">
          <view class="headItem headItem1">大类</view>
          <view class="headItem headItem2">判断标准</view>
          <view class="headItem headItem3">满分</view>
          <view class="headItem headItem4" style="border-right: 1px solid #00796B50">修改前得分</view>
          <view class="headItem headItem5">修改后得分</view>
        </view>
        <view class="contentInnerBox" v-for="(item,index) in scoreCardList" :key='index'>
          <view class="contentItem1">{{ item.item }}</view> 
          <view class="innerDes">
            <view v-for="(q,i) in item.children" :key="i" class="innerDesList" style="display: flex;">
              <view :class="'innerCon ' + ( q.editBeforeBig !== q.bigResult ? 'innerConDef' : '')">
                {{ q.scoreCardScoringCriteria }}
              </view>
            </view>
          </view>
          <view :class='"contentItem2 " + (item.children[0].editBeforeBig !== item.children[0].bigResult ? "contentItem2Def" : "")' style="width: 80rpx;display: flex;align-items:center;justify-content: center;border-bottom: 1px solid #00796B50;border-right: 1px solid #00796B50;color: #999;">
              {{ item.children[0].allBigResult }}
            </view>
            <view :class='"contentItem3 " + (item.children[0].editBeforeBig !== item.children[0].bigResult ? "contentItem3Def" : "")'  style="width: 80rpx;display: flex;align-items:center;justify-content: center;border-bottom: 1px solid #00796B50;border-right: 1px solid #00796B50;color: #999;">
              {{ item.children[0].editBeforeBig }}
            </view>
            <view :class='"contentItem4 " + (item.children[0].editBeforeBig !== item.children[0].bigResult ? "contentItem4Def" : "")' style="width: 80rpx;display: flex;align-items:center;justify-content: center;border-bottom: 1px solid #00796B50;border-right: 1px solid #00796B50;color: #999;">
              {{ item.children[0].bigResult }}

            </view>
        </view>
        <view class="headBox headBoxBot">
          <view class="headItem headItem1">总分</view>
          <view class="headItem headItem2"></view>
          <view class="headItem headItem3" style="border-right: none !important;"> {{ allScore }}</view>
          <view class="headItem headItem4">{{ allScoreResultBefore }}</view>
          <view class="headItem headItem5">{{ allScoreResult }}</view>
        </view>
      </view>
      <!-- 大分项 end -->
  </view>
</template>
<script>
import mRequest from '@/api/index.js'
import hccmStore from '@/common/hccm-store.js'
export default {
  data () {
    return {
      id: '',
      examInfo: {},
      scoreCardList: [],
       // 大分项 1     小分项 2
      examScoreSet: '',
      allScore: 0,
      allScoreResult: 0,
      allScoreResultBefore: 0
    }
  },
  methods: {
    getDetail(){
      let params = {
        id: this.id
      }
      mRequest.recordsstudentexaminationpermissionDetail(params).then(res => {
        this.examInfo = res.examination
        // 大分项 1     小分项 2
        this.examScoreSet = res.examScoreSet
        // 评分卡
        let scoreCardListBak = res.nowOneDetails.sort((a, b) => {
          return a.ordersn - b.ordersn
        })
        let editBefore = res.thisOneDetails.sort((a, b) => {
          return a.ordersn - b.ordersn
        })
        this.allScore = 0
        this.allScoreResult = 0
        this.allScoreResultBefore = 0
        scoreCardListBak.map(v => {
          editBefore.map(q => {
            if (v.scoreCardId === q.scoreCardId) {
              v.editBeforeSmall = q.result
              v.editBeforeBig = q.bigResult
              // 大分项 1     小分项 2
              if (this.examScoreSet === '2') {
                this.allScore += Number(v.scoreCardTotalScore)
                this.allScoreResult += Number(v.result)
                this.allScoreResultBefore += Number(q.result)
              }
            }
          })
        })
        this.allScore = this.allScore.toFixed(2)
        this.allScoreResult = this.allScoreResult.toFixed(2)
        this.allScoreResultBefore = this.allScoreResultBefore.toFixed(2)
        let fatherIdsBak = scoreCardListBak.map(v => {
          return v.scoreCardItem
        })
        let fatherIds = [...new Set(fatherIdsBak)]
        let newArr = []
        fatherIds.map(item => {
          newArr.push({
            item: item,
            itemScore: 0,
            itemScoreResult: 0,
            children: []
          })
        })
        if (this.examScoreSet === '1') {
					// 大分项
          scoreCardListBak.map(q => {
            newArr.map(p => {
              if (q.scoreCardItem === p.item) {
                p.children.push(Object.assign(q, {result: q.scoreCardTotalScore}))
                p.itemScore = p.itemScore + q.scoreCardTotalScore
                p.itemScoreResult = p.children[0].bigResult
              }
            })
          })
          this.allScore = 0
          this.allScoreResult = 0
          this.allScoreResultBefore = 0
          this.scoreCardList = JSON.parse(JSON.stringify(newArr))
          this.scoreCardList.map(q => {
            this.allScore += Number(q.itemScore)
            this.allScoreResult += Number(q.itemScoreResult)
            this.allScoreResultBefore += Number(q.children[0].editBeforeBig)
          })
          this.allScore = this.allScore.toFixed(2)
          this.allScoreResult = this.allScoreResult.toFixed(2)
          this.allScoreResultBefore = this.allScoreResultBefore.toFixed(2)
        } else {
					// 小分项
          scoreCardListBak.map(q => {
            newArr.map(p => {
              if (q.scoreCardItem === p.item) {
                p.children.push(Object.assign(q, {result: q.result}))
                p.itemScore = p.itemScore + q.scoreCardTotalScore
              }
            })
          })
          this.scoreCardList = JSON.parse(JSON.stringify(newArr))
        }
      })
    }
  },
  onLoad (options) {
    this.id = options.id
    this.getDetail()
  },
  watch:{
  }
}
</script>
<style lang='scss'>
.historyEditDetail{
  padding: 20rpx;
  .title_des{
    font-size: 20rpx;
    color: #00b99e;
    height: 40rpx;
    line-height: 40rpx;
    position: relative;
    padding-left: 20rpx;
    background: #00b99e30;
    border-radius: 6rpx;
    // padding-left: 20px;
  }
  .title:before{
    content: '';
    height: 16rpx;
    width: 3rpx;
    border-radius: 4rpx;
    background: #00b99e;
    position: absolute;
    top: 6rpx;
    left: 10rpx;
  }
  .contentBox{
    padding: 10rpx;
    font-size: 14rpx;
  }
  .contentInner{
    padding: 0;
    margin: 10rpx 0;
    .headBox{
      height: 36rpx;
      background: rgba(72, 83, 104, 0.5);
      color: #000;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 6rpx 6rpx 0 0;
      overflow: hidden;
      font-size: 14rpx;
      font-weight: 600;
      .headItem{
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        border-left: 1rpx solid #00796B50;
      }
      .headItem:last-child{
        border-left:none;
      }
      .headItem1{
        width: 160rpx;
      }
      .headItem2{
        flex: 1;
      }
      .headItem3{
        width: 80rpx;
      }
      .headItem4{
        width: 80rpx;
      }
      .headItem5{
        width: 80rpx;
      }
    }
    .headBoxBot{
      background: none;
      height: 46rpx;
      border-bottom: 1rpx solid #00796B50;
      .headItem3{
        border-right: none !important;
        color: #33333390 !important;
        font-size: 18rpx;
        font-weight: 600;
      }
      .headItem4{
        border-right: 1rpx solid #00796B50 !important;
        color: #FF6D00 !important;
        font-size: 18rpx;
        font-weight: 600;
      }
      .headItem5{
        border-right: 1rpx solid #00796B50 !important;
        color: #00b99e !important;
        font-size: 18rpx;
        font-weight: 600;
      }
    }
    .contentInnerBox{
      display: flex;
      align-items: stretch;
      justify-content: center;
      border: 1rpx solid #00796B50;
      border-top: none;
      .contentItem1{
        width: 160rpx;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .innerDes{
        flex: 1;
        .innerDesList{
          .innerCon{
            flex: 1;
            line-height: 18rpx;
            padding: 10rpx;
            border-bottom: 1rpx solid #00796B50;
            border-left: 1rpx solid #00796B50;
            border-right: 1rpx solid #00796B50;
          }
          .innerConDef{
            background: rgba(213, 0, 0, 0.1);
          }
        }
        .innerDesList:last-child{
          .innerCon{
            border-bottom: none;
          }
          .scoreBox1{
            border-bottom: none !important;
          }
          .scoreBox2{
            border-bottom: none !important;
          }
          .scoreBox3{
            border-bottom: none !important;
          }
        }
      }
      .contentItem2{
        font-size: 16rpx;
        font-weight: 600;
        color: #33333390 !important;
        width: 59rpx;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        border-bottom: none !important;
      }
      .contentItem3{
        font-size: 16rpx;
        font-weight: 600;
        color: #FF6D0060 !important;
        width: 99rpx;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        border-bottom: none !important;
      }
      .contentItem4{
        font-size: 16rpx;
        font-weight: 600;
        color: #00b99e60 !important;
        width: 99rpx;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        border-bottom: none !important;
        border-right: none !important
      }
      .contentItem2Def{
        background: rgba(213, 0, 0, 0.1);
      }
      .contentItem3Def{
        font-size: 16rpx;
        font-weight: 600;
        color: #FF6D00 !important;
        background: rgba(213, 0, 0, 0.1);
      }
      .contentItem4Def{
        font-size: 16rpx;
        color: #00b99e !important;
        font-weight: 600;
        background: rgba(213, 0, 0, 0.1);
      }
    }
    .scoreBox1{
      width: 60rpx;
      font-size: 16rpx;
      font-weight: 600;
      color: #33333390 !important;
    }
    .scoreBox1Def{
      background: rgba(213, 0, 0, 0.1) !important;
    }
    .scoreBox2{
      width: 99rpx;
      font-size: 16rpx;
      font-weight: 600;
      color: #FF6D0060 !important;
    }
    .scoreBox2Def{
      color: #FF6D00 !important;
      background: rgba(213, 0, 0, 0.1);
    }
    .scoreBox3{
      width: 99rpx;
      font-size: 16rpx;
      font-weight: 600;
      color: #00b99e60 !important;
    }
    .scoreBox3Def{
      color: #00b99e !important;
      background: rgba(213, 0, 0, 0.1);
    }
  }
}
  </style>
